<template>
  <div>
    <v-top></v-top>
    <v-left></v-left>
    <router-link to="/layout">son1</router-link>
    <router-link to="/layout/son2">son2</router-link>
    <router-link to="/layout/son3">son3</router-link>
    <hr>
    <!-- 唯一的一个会变的组件 -->
    <router-view></router-view>
    <!-- 命名视图：给路由的视图添加name属性，是为了区分同一页面中不同的视图，每个视图对应不同的组件，且不能合并。在路由文件中需要将component改成components，写做对象的形式 -->
    <!-- <router-view name="a"></router-view>
    <router-view name="b"></router-view> -->
  </div>
</template>

<script>
import vLeft from './left.vue'
import vTop from './top1.vue'
export default {
  components: {
    vLeft: vLeft,
    vTop: vTop,
  }
}
</script>

<style>

</style>